<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
    <title>代理商管理系统</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/color.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/demo.css" />
    <script src="${ctx}/statics/easyui/jquery.min.js" type="text/javascript"></script>
    <script src="${ctx}/statics/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="${ctx}/statics/easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body class="easyui-layout" >
        <div data-options="region:'center',split:false" style="background:#eee;padding:10px 20px 10px 20px">
            <div style="padding-left:10px;margin-bottom:10px">
                <p>
                    <span style="width:80px;text-align:justify;display:inline-block">
                        财务账户余额:
                    </span>
                    <input id="financialMoney" class="easyui-textbox" type="text" style="width:150px;" readonly/>
                </p>
            </div>
            <div style="border:1px solid lightgrey;padding-left:10px">
                <form method="post" id="financialForm" >
                    <p>
                        <span style="width:80px;text-align:justify;display:inline-block">
                            搜索用户:
                        </span>
                            <input id="user" name="userId" style="width:150px" /><span>输入后自动搜索</span>
                            <input type="hidden" name="userName" />
                    </p>
                    <p style="margin-top:20px">
                        <span style="width:80px;text-align:justify;display:inline-block">
                            用户角色:
                        </span>
                        <input id="roleName" class="easyui-textbox" type="text" style="width:150px" readonly />
                    </p>
                    <p style="margin-top:20px">
                        <span style="width:80px;text-align:justify;display:inline-block">
                            操作类型:
                        </span>
                        <input name="detailType" id="type" value="--请选择--" style="width:150px" />
                        <input type="hidden" name="detailTypeName" />
                    </p>
                    <p style="margin-top:20px;margin-bottom:0">
                        <span style="width:80px;text-align:justify;display:inline-block">
                            操作资金:
                        </span>
                        <input id="money" name="money" class="easyui-textbox" type="text" style="width:150px;" />
                    </p>
                    <p style="color:crimson;margin-top:10px">重要提示:输入的资金,正数(1000)为向账户增加1000圆,负数(-1000)为向账户减少1000圆,精确到小数点后四位</p>
                    <p style="margin-top:10px">
                        <span style="width:80px;text-align:justify;display:inline-block">
                            操作备注:
                        </span>
                    </p>
                    <p>
                        <textarea name="memo" rows="8" cols="50"></textarea>
                    </p>
                    <p style="color:crimson;">重要提示:输入的资金, 正数为向账户增加1000圆,负数(-1000)为向账户减少1000圆,精确到小数点后四位</p>
                    <p style="margin-top:10px" >
                        <a href="javascript:void(0)" class="easyui-linkbutton c6"
                           onclick="submitForm()" style="width:60px;margin-right:10px;">确定</a>
                    </p>
                </form>
            </div>
        </div>

    <script>

        $(
            function ()
            {
                //页面加载发送请求查询财务账户余额
                $.ajax(
                    {
                        type:"POST",
                        url:"${ctx}/do/comboboxJsonStr",
                        data:{"action":"financialAccount"},
                        dataType:"json",
                        success:function( json )
                        {
                            $("#financialMoney").textbox('setValue',json.money + "元");
                        }
                    }
                );

                //查询所有可用客户并设置其角色名称
                $("#user").combobox(
                    {
                        url:'${ctx}/do/comboboxJsonStr',
                        queryParams:{"action":"usersAndRoleName"},
                        valueField:'id',
                        textField:'userName',
                        editable: true,
                        onSelect:function( rec )
                        {
                            //设置用户角色名称
                            $("#roleName").textbox('setValue',rec.roleName );
                            $("[name=userName]").val( rec.userName );
                        }
                    });

                //查询所有可用财务操作类型
                $("#type").combobox(
                    {
                        url:'${ctx}/do/comboboxJsonStr',
                        queryParams:{"action":"financialType"},
                        valueField:'configTypeValue',
                        textField:'configValue',
                        editable: false,
                        onSelect:function( rec )
                        {
                            //设置用户角色名称
                            $("[name=detailTypeName]").val( rec.configValue );
                        }
                    });
            }
        );

        //点击提交表单时触发
        function submitForm()
        {
            $("#financialForm").form( 'submit' ,
                {
                    url:"${ctx}/do/financialOperate",
                    //开启校验
                    novalidate:false,
                    //提交前设置表单携带参数
                    onSubmit: function(param)
                    {
                        //校验表单 校验不通过返回false,不提交
                        //return $(this).form('validate');
                    },
                    //提交成功后处理返回值
                    success:function(data)
                    {
                        //注意需要将返回值转换为json
                        var json = JSON.parse(data);
                        infoWindows( json );
                        //提交成功后清空表单
                        $("#financialForm").form('clear');
                    }
                }
            );
        }

        //消息提示窗口
        function infoWindows( json )
        {
            var title = "财务操作";
            var info = (json.message == 1?("操作成功"):("操作失败"));
            var icon = (json.message == 1?"info":"error");
            $.messager.alert(title,info,icon);
        }
    </script>
</body>
</html>
